<template>
	<view class="main">
		<view class="top">
			<view class="top_adr" @click="fanhui()">
				<image src="../../static/img/turn2.png" mode="widthFix"></image>
			</view>
			<text class="top_tit t25">收集信息</text>
			<view class="top_text t3" @click="shgm()">购买信息+</view>
		</view>
		<view class="sy_main">
			<view class="sy_li" style="border-right: 1px solid #F1C75E;">
				<text class="t1">当前采集条数</text>
				<text class="t28">{{zong}}条</text>
			</view>
			<view class="sy_li" style="border-right: 1px solid #F1C75E;">
				<text class="t1">已购买条数</text>
				<text class="t28">{{mai}}条</text>
			</view>
			<view class="sy_li">
				<text class="t1">未购买条数</text>
				<text class="t28">{{zong-mai}}条</text>
			</view>
		</view>
		<!-- <view class="msg_list">
			<view class="msg_list_tit t22">收集人id</text></view>
			<view class="msg_list_time t14">2738972987498</view>
			<view class="msg_list_tit t22">用户名称</text></view>
			<view class="msg_list_time t14">哥哥</view>
			<view class="msg_list_tit t22">用户手机号</text></view>
			<view class="msg_list_time t14">15166590913</view>
		</view> -->
		<view class="msg_list" v-for="(item,index) in orderlist" :key="index">
			<view class="msg_list_tit t22">用户名称</text></view>
			<view class="msg_list_time t14" v-if="item.status == 1">{{item.info.name}}</view>
			<view v-else>
				<view class="msg_list_time t14" v-if="item.info.name.length == 3">{{item.info.name[0] + "**"}}</view>
				<view class="msg_list_time t14" v-else>{{item.info.name[0] + "*"}}</view>
			</view>
			<view class="msg_list_tit t22">用户手机号</text></view>
			<view class="msg_list_time t14">{{item.info.phone}}</view>
		</view>
		<view class="zanwu" v-show="jiazai" style="padding-top: 4vw; margin-bottom: 10vw;"><text class="t7">{{more}}</text></view>
		<view class="zanwu" v-show="zanwu" style="margin-top:20vw; margin-bottom: 10vw;">
			<image src="../../static/img/zanwu.png" mode="widthFix"></image><text class="t8">{{wu}}</text>
		</view>

		<view class="tanc" v-show="gm">
			<image src="../../static/img/clo.png" class="tancclo" @click="shgm()"></image>
			<view class="shuru">
				<text class="shuru_tit t1">购买条数</text>
				<input type="number" value="" placeholder="请输入购买条数" class="shuru_text t1" v-model="lilv" />
			</view>
			<view class="shuru">
				<text class="shuru_tit t1">支付方式</text>
				<view class="xuan_li t1" @click="types(1)" :class="[typen==1?'act':'']">
					<image src="../../static/img/wx.png" mode="widthFix"></image>微信
				</view>
				<view class="xuan_li t1" @click="types(6)" :class="[typen==6?'act':'']">
					<image src="../../static/img/zfb.png" mode="widthFix"></image>支付宝
				</view>
			</view>
			<view class="shuru" v-if="money!=0">
				<text class="shuru_tit t1">需支付金额</text>
				<text class="xuan_li t20" style="border: none;">{{money}}元</text>
			</view>
			<view class="shuru t11" v-if="cuo!=''" style="box-shadow: none;">错误提示:{{cuo}}
			</view>

			<view class="tuic t2" @click="goumai()">确定购买</view>
		</view>
		<!-- <view class="msg_list" @click="list(1)">
		<view class="msg_list_tit"><text class="t22">公告标题</text><text class="t1">公告标详情公告标详情公告标详情公告标详情公告标详情</text></view>
		<view class="msg_list_time t14">2020<br>04/25</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid: '',
				orderlist: [],
				pages: 1,
				mainid: '',
				ismore: true,
				more: '加载更多',
				jiazai: false,
				wu: "暂无数据",
				zanwu: false,
				typen: 1,
				money: '',
				lilv: '',
				gm: false,
				zong: 0,
				tishi: '',
				cuo: '',
				mai: 0,
			}
		},
		// 监听触底
		onReachBottom() {
			//阻止重复加载
			if (this.ismore == false) {
				return;
			}
			this.pages++;
			this.orlist();

		},

		onLoad(options) {
			var _this = this;
			_this.pid = options.id;
			// _this.sures('1421041928221315074')
			// _this.pid = '1382965821622464513';
			uni.getStorage({
				key: 'user',
				success: function(res) {
					_this.mainid = res.data.id;
					_this.orlist();
				}
			});
		},
		methods: {
			shgm() {
				if (this.gm == false) {
					this.gm = true
					this.lilv = ''
				} else {
					this.gm = false
				}
			},
			types(e) {
				console.log(e);
				this.typen = e;
			},
			goumai() {
				var _this = this;
				if (_this.checks == false) {
					return false
				}
				if (!_this.lilv) {
					uni.showToast({
						title: '请输入购买条数',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if (_this.lilv > _this.zong - _this.mai) {
					uni.showToast({
						title: '购买条数不能大于未购买条数',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				var str = /^\+?[1-9][0-9]*$/;
				if (!_this.lilv > 0) {
					uni.showToast({
						title: '购买条数必须大于0',
						icon: 'none',
						duration: 2000
					});
					return false
				} else if (!(str.test(_this.lilv))) {
					uni.showToast({
						title: '购买条数必须为正整数',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				_this.checks = false
				uni.showLoading(); //关闭加载动画
				var data = {
					"adId": _this.pid, //	广告ID		true	string
					"num": _this.lilv, //	购买数量		true	integer
					"payType": _this.typen, //支付方式		true	integer
					"payerId": _this.mainid, //	支付用户ID		true	string
					"plat": '1' //购买平台		true	integer
				};
				console.log('购买请求参数：',data);
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/buyAdCollectLogNum', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: data,
					success: (res) => {
						_this.checks = true
						uni.hideLoading(); //关闭加载动画
						console.log('购买请求结果：',res);
						console.log('购买请求结果typen：'+_this.typen);
						//需要添加请求失败的提示信息
						if (res.data.status == '200') {

							if (_this.typen == 1) {
								var orderInfo = res.data.data.third;
								var oid = res.data.data.trade.id;
								// _this.infos = JSON.stringify(res.data.data.third);
								console.log(res.data);

								// 微信支付
								uni.requestPayment({
									provider: "wxpay",
									orderInfo: orderInfo,
									success(e) {
										// uni.showToast({
										// 	title: '支付成功',
										// 	icon: 'none',
										// 	duration: 2000
										// });
										//支付成功之后
										setTimeout(function() {
											_this.sures(oid);
											_this.gm = false;
										}, 2000)
									},
									fail(e) {
										this.checks = true
										_this.infos = _this.infos + JSON.stringify(e);
										console.log(e);
										uni.showToast({
											title: e.errMsg,
											icon: 'none',
											duration: 2000
										});
										// _this.succes(orderid);
									}
								})
							} else {
								_this.infos = JSON.stringify(res.data.data);
								var oid = res.data.data.trade.id;
								var orderInfo = res.data.data.third.body;
								// console.log(orderInfo);
								// 支付宝支付
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: orderInfo, //支付宝订单数据
									success: function(res) {
										uni.showToast({
											title: '支付成功',
											icon: 'none',
											duration: 2000
										});
										//支付成功之后
										setTimeout(function() {
									
											_this.sures(oid);
											_this.gm = false;
										}, 2000)
									},
									fail: function(err) {
										_this.checks = true
										// _this.infos = _this.infos + JSON.stringify(err);
										uni.showToast({
											title: err.errMsg,
											icon: 'none',
											duration: 2000
										});
									}
								});
							}

						} else {
							this.cuo = res.data.msg;
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						_this.checks = true
						uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
						console.log(error)
					}
				});
			},
			sures(id) {
				console.log('sures请求参数:'+id);
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/callbackByAdCollect/' + id, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: id, //	广告ID		true	string
					},
					success: (res) => {
						console.log('sures请求结果：',res);
						if (res.data.status == '200') {
							uni.showToast({
								title: '确认购买成功',
								icon: 'none',
								duration: 2000
							});
							// 支付成功之后，返回上一页刷新上一页面

							_this.orlist();
						} else {

							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						_this.checks = true
						console.log(error)
					}
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			orlist() {
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/adCollectLogPage/' + this.pid + '/' + this
						.pages, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: this.pid, //	广告ID		true	string
						page: this.pages, //
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log(res);
						if (res.data.status == '200') {
							this.zong = res.data.data.list.total;
							this.mai = res.data.data.count;
							if (res.data.data.list.pages == this.pages) {
								this.more = "没有更多数据了";
								this.jiazai = true;
								this.zanwu = false;
								this.ismore = false;
							} else if (res.data.data.list.pages == 0) {
								this.more = "暂无数据";
								this.jiazai = false;
								this.zanwu = true;
								this.ismore = false;
							}
							for (var i = 0; i < res.data.data.list.records.length; i++) {
								// console.log(res.data.data.list.records[i].info);
								res.data.data.list.records[i].info = JSON.parse(res.data.data.list.records[i]
									.info);
							}
							if (this.pages == 1) {

								this.orderlist = res.data.data.list.records;
							} else {
								for (var i = 0; i < res.data.data.list.records.length; i++) {
									this.orderlist.push(res.data.data.list.records[i]);
								}
							}
						}
					},
					fail: (error) => {
						uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
						console.log(error)
					}
				});
			},
		}
	}
</script>

<style>
	.sy_li {
		width: 33.33%;
		height: auto;
		float: left;
	}

	.sy_main {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		background: url(../../static/img/settlement_bg.png) no-repeat top center;
		margin: 5vw 0;
		padding: 10vw 6vw;
		background-size: 100%;
		border-radius: 2vw;
		margin-top: 20vw;
	}

	.sy_main text {
		width: 100%;
		height: auto;
		float: left;
		text-align: center;
		line-height: 10vw;
	}

	.xuan_li {
		width: 100%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
		border: 1px solid #eee;
		border-radius: 2vw;
		margin: 2vw 0;
	}

	.xuan_li image {
		width: 6vw;
		height: auto;
		display: block;
		float: left;
		margin-top: 2vw;
		margin-left: 5vw;
		margin-right: 2vw;
	}

	.act {
		/* background: #F1C75E; */
		border: 1px solid #F1C75E;
		color: #F1C75E;
	}

	.shuru {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		border-radius: 1vw;
		overflow: hidden;
		padding: 2vw 4vw;
		background: #fff;
		margin-top: 3vw;
		box-shadow: 0px 0px 5px #eee;
	}

	.shuru_tit {
		width: 30%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
	}

	.shuru_text {
		width: 60%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: right;
		text-align: right;
	}

	.tanc {
		width: 80vw;
		height: auto;
		position: fixed;
		top: 50%;
		left: 10vw;
		background: #fff;
		border-radius: 2vw;
		box-shadow: 0px 0px 20vw #999;
		padding: 4vw;
		z-index: 99999;
		margin-top: -75vw;
	}

	.tancclo {
		position: absolute;
		right: -4vw;
		top: -4vw;
		background: #F1C75E;
		width: 8vw;
		height: 8vw;
		padding: 2vw;
		border-radius: 8vw;
	}

	.top {
		width: 100%;
		height: 20vw;
		position: fixed;
		top: 0vw;
		left: 0;
		padding-top: 8vw;
		background: #F8F8F8;
		z-index: 999;
	}

	.top_adr {
		width: auto;
		height: 12vw;
		float: left;
		position: absolute;
		top: 8vw;
		left: 0;
		padding-left: 5vw;
	}

	.top_adr text {
		width: 15vw;
		overflow: hidden;
		height: 12vw;
		position: relative;
		line-height: 12vw;
		float: left;
	}

	.top_adr image {
		width: 2.5vw;
		margin-top: 4vw;
		float: left;
		margin-right: 2vw;
	}

	.bai {
		width: 12vw;
		height: auto;
		display: block;
		float: left;
	}

	.top_tit {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		text-align: center;
		float: left;
	}

	.msg_list {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		box-shadow: 0px 0px 5px #eee;
		padding: 2vw 3vw;
		border-radius: 1vw;
		border: 1px solid #F2F2F2;
		margin-bottom: 2vw;
		/* margin-top: 16vw; */
	}

	.top_text {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		position: absolute;
		top: 10vw;
		right: 5vw;
		padding: 0 4vw;
		background: #F1C75E;
		border-radius: 2vw;
	}

	.msg_list_tit {
		width: 30%;
		height: auto;
		display: block;
		float: left;
		line-height: 10vw;
	}

	.msg_list_tit text {
		width: 100%;
		height: 10vw;
		line-height: 10vw;
		display: block;
		float: left;
		overflow: hidden;
	}

	.about_info {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		line-height: 7vw;
	}

	.msg_list_time {
		width: 70%;
		height: auto;
		display: block;
		float: right;
		text-align: right;
		line-height: 10vw;
	}

	.imgs {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}
</style>
